<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>列表标记的规约 List markup conventions</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<script type="text/javascript">
$(function(){
	    $("ul.tab a").click(function() {
        var i = $("ul.tab a").index(this);
        $(this).parent().find("a").removeClass("current");
        $(this).addClass("current");
        $(".subtab").hide().eq(i).show();
        return false;
		});
	});
</script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/list/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
				<h1>列表标记的规约List markup conventions</h1>
                <ul class="tab">
                    <a href="#" class="current">综述</a>
                    <a href="#">选项</a>
                    <a href="#">方法</a>
                    <a href="#">事件</a>
                </ul><br>
    <div class="subtab">
	<div class="desc">
				<h1><strong>1.基本的带连接的列表 Basic linked list</strong></h1>
                <div>列表的代码为一个含 data-role="listview" 属性无序列表ul。Jquery Mobile会把所有必要的样式(列表项右出现一个向右箭头，并使列表与屏幕同宽等)应用在列表上，使其成为易于触摸的控件。当你点击列表项时，Jquery Mobile 会触发该列表项里的第一个链接，通过ajax请求链接的URL地址，在DOM中创建一个新的页面并产生页面转场效果。</div></div>
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code">&lt;ul data-role=&quot;listview&quot; data-theme=&quot;g&quot;&gt;<br>
&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;acura.html&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;<br>
&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;audi.html&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;<br>
&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href=&quot;bmw.html&quot;&gt;BMW&lt;/a&gt;&lt;/li&gt;<br>
&lt;/ul&gt;</div>
	<div class="desc">
                <div><strong>对非内嵌的列表的样式的说明：</strong>为了让所有的非内嵌式的列表都充满屏幕边缘，非内嵌式的列表会有一个-15px的margin来抵消掉body 15px的padding(真心不理解为什么要用这种做法....)。所以如果你想在列表的上方或下方添加内容的话，需要给他们添加额外的margin，否则会产生重叠的现象...</div></div>
    	<p class="indent"><strong>效果图：</strong></p>
		<img src="../../images/list/Basic list.png" tppabs="http://www.jqmapi.com/images/list/Basic%20list.png">		
    	<hr />
		<div class="desc">
				<h1>2.嵌套的列列表 Nested list</h1>
                <div>通过“ul” “ol”的li中嵌套子 ul ，ol你可以创建嵌套列表。当一个拥有子列表的列表项被点击时，Jquery Mobile框架会生成一个新的ul页面充满屏幕，并自动生成一个为父列表项名称为标题的header,以及一个子列表。这个动态生成的嵌套的列表默认的主题样式“b"(蓝色)，提示你是在二级菜单里。列表可以嵌套多层，Jquery Mobile会自动处理这些链接和页面。</div></div>
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code">&lt;ul&gt;<br />
 　&lt;li&gt;Pets<br /> 
 　　
&lt;ul&gt;<br />
	　　　&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Canary&lt;/a&gt;&lt;/li&gt;<br /> 
	　　　
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Cat&lt;/a&gt;&lt;/li&gt;<br /> 
　　
&lt;/ul&gt;<br /> 
　
&lt;/li&gt;<br /> 
　
&lt;li&gt;Farm animals<br /> 
　　
&lt;ul&gt;<br /> 
　　　
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Chicken&lt;/a&gt;&lt;/li&gt;<br /> 
　　　
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Cow&lt;/a&gt;&lt;/li&gt;<br /> 
　　
&lt;/ul&gt;<br /> 
　
&lt;/li&gt;<br />
&lt;/ul&gt;</div>
        <p class="indent"><strong>效果图：</strong></p>
  <img src="../../images/list/Nested list.png" tppabs="http://www.jqmapi.com/images/list/Nested%20list.png">		
    	<hr />
		<div class="desc">
				<h1>3.数字排序的列表Numbered list</h1>
                <div>通过有序列表ol可以创建数字排序的列表用来表现顺序序列比如说搜索结果或者电影排行榜时非常有用。当增强效果应用到列表时，Jquery Mobile优先使用css的方式给列表添加编号，当浏览器不支持这种方式时，框架会采用JavaScript将编号写入列表中。</div></div>
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code">&lt;ol data-role=&quot;listview&quot;&gt;<br /> 
    　
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;The Godfather&lt;/a&gt;&lt;/li&gt;<br /> 
　
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Inception&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ol&gt;</div>
        <p class="indent"><strong>效果图：</strong></p>
  <img src="../../images/list/Numbered list.png" tppabs="http://www.jqmapi.com/images/list/Numbered%20list.png">		
    	<hr />

		<div class="desc">
				<h1>4.只读列表 Read-only list</h1>
                <div>列表也可以用来展示没有交互的条目，通常会是一个内嵌的列表。通过有序或者无序列表都可以创建只读列表，列表项内没有链接即可，Jqmobil默认将他们的主题样式为“c”白色无渐变色，并把字号设为比可点击的列表项的小，以节省空间。</div></div>
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code">&lt;ul data-role=&quot;listview&quot; data-inset=&quot;true&quot;&gt;<br /> 
    　
&lt;li&gt;Acura&lt;/li&gt;<br /> 
　
&lt;li&gt;Audi&lt;/li&gt;<br />
&lt;/ul&gt;</div>
        <p class="indent"><strong>效果图：</strong></p>
		<img src="../../images/list/Read-only list.png" tppabs="http://www.jqmapi.com/images/list/Read-only%20list.png">	
    	<hr />
        
        		<div class="desc">
				<h1>5.拆分的按钮列表 Split button lists</h1>
                <div>有时每个列表项会有多于一个操作，这时拆分按钮用来提供2个独立的可点击的部分：列表项本身和列表项右边的小icon。要创建这种拆分按钮，在li 插入第二个链接即可，框架会创建一个竖直的分割线，并把链接样式化为一个只有icon的按钮，记得设置title属性以保证可访问性。</div>
                <div>你可以通过指定data-split-icon属性来设置位于右边的分隔项的图标（图标详情参见 图标分隔项的主题样式可以通过 data-split-theme属性来设置。</div>
  </div>
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code"> 
    <p>&lt;ul data-role=&quot;listview&quot; data-split-icon=&quot;gear&quot; data-split-theme=&quot;d&quot;&gt;<br />
  	　&lt;li&gt;<br />
  　　&lt;img src=&quot;images/album-bb.jpg&quot; /&gt;<br />
  　　&lt;h3&gt;&lt;a href=&quot;index.html&quot;&gt;Broken Bells&lt;/a&gt;&lt;/h3&gt;<br />
  　　&lt;p&gt;Broken Bells&lt;/p&gt;<br />
  　　&lt;a href=&quot;lists-split-purchase.html&quot; data-rel=&quot;dialog&quot; data-transition=&quot;slideup&quot;&gt;Purchase album&lt;/a&gt;<br />
  　&lt;/li&gt;<br />
  　&lt;li&gt;<br />
  　　&lt;img src=&quot;images/album-hc.jpg&quot; /&gt;<br />
  　　&lt;h3&gt;&lt;a href=&quot;index.html&quot;&gt;Warning&lt;/a&gt;&lt;/h3&gt;<br />
  　　&lt;p&gt;Hot Chip&lt;/p&gt;<br />
  　　&lt;a href=&quot;lists-split-purchase.html&quot; data-rel=&quot;dialog&quot; data-transition=&quot;slideup&quot;&gt;Purchase album&lt;/a&gt;<br />
  　&lt;/li&gt;</p>
    <p>&lt;/ul&gt;</p>
  </div>
        <p class="indent"><strong>效果图：</strong></p>
  <img src="../../images/list/List formatting.png" tppabs="http://www.jqmapi.com/images/list/List%20formatting.png">	
    	<hr />
        
        		<div class="desc">
				<h1>6.列表分割项 List dividers</h1>
                <div>列表项也可以转化为列表分割项，用来组织列表，使列表项成组。给任意列表项添加data-role="list-divider" 属性即可。默认情况下列表项的主题样式为“b“浅灰)，但给列表（ul或ol）添加 data-divider-theme   属性可以设置列表分割项的主题样式。</div>
  </div>
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code"> 
    <p> &lt;ul data-role=&quot;listview&quot;&gt;<br />      
      　&lt;li data-role=&quot;list-divider&quot;&gt;A&lt;/li&gt;<br /> 
	　
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Adam Kinkaid&lt;/a&gt;&lt;/li&gt;<br /> 
　
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Alex Wickerham&lt;/a&gt;&lt;/li&gt;<br /> 
　
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Avery Johnson&lt;/a&gt;&lt;/li&gt;<br /> 
　
 &lt;li data-role=&quot;list-divider&quot;&gt;B&lt;/li&gt;<br /> 
　
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Bob Cabot&lt;/a&gt;&lt;/li&gt;			</p>
    <p>&lt;/ul&gt;<br />
    </p>
  </div>
        <p class="indent"><strong>效果图：</strong></p>
  <img src="../../images/list/List dividers.png" tppabs="http://www.jqmapi.com/images/list/List%20dividers.png">
    	<hr />



        		<div class="desc">
				<h1>7.搜索过滤框 Search filter</h1>
                <div>Jquery Mobile提供了一种非常方便的方式通过在客户端进行的搜索机制过滤列表。要使一个列表可过滤，只需为列表设置data-filter="true" 属性即可。框架会在列表上方增加一个搜索框，当用户在搜索输入框中输入时，Jquery Mobile会自动过滤掉不含输入字符的列表项。</div>
                <div>搜索输入框默认的字符为 "Filter items...".通过设置mobileinit事件的绑定程序或者给 $.mobile.listview.prototype.options.filterPlaceholder 选项设置一个字符串，或者给列表设置data-filter-placeholder属性，可以设置搜索输入框的默认字符。</div>
  </div>
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code"> 
    <p>&lt;ul data-role=&quot;listview&quot;   data-filter=&quot;true&quot;  &gt;<br />
　　&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;<br />
　　&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt; </p>
  </div>
        <p class="indent"><strong>效果图：</strong></p>
		<img src="../../images/list/Search filter bar.png" tppabs="http://www.jqmapi.com/images/list/Search%20filter%20bar.png">
    	<hr />
        
        		<div class="desc">
				<h1>8.文本格式和计数气泡 Text formatting &amp; counts</h1>
<div>Jquery Mobile支持通过HTML语义化的标签来显示列表项中所需常见的文本格式（比如 标题/描述，二级信息，计数等）</div>
                <ul>
                	<li>• 将数字用一个元素包裹，并添加ui-li-count的class,放置于列表项内，可以给列表项右侧增加一个计数气泡</li>;
					<li>• 要添加有层次关系的文本可以使用标题来强调，用段落文本来减少强调</li>;  
                    <li>• 补充信息（比如日期）可以通过包裹在class="ui-li-aside"的容器中来添加到列表项的右侧</li>;                  
                </ul>
  </div>
  
  
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code"> 
    <p> &lt;ul data-role=&quot;listview&quot;&gt;<br />
 　&lt;li data-role=&quot;list-divider&quot;&gt;Friday, October 8, 2010 &lt;span class=&quot;ui-li-count&quot;&gt;2&lt;/span&gt;&lt;/li&gt;<br />
 　&lt;li&gt;<br /> 
 　　
&lt;h3&gt;&lt;a href=&quot;index.html&quot;&gt;Stephen Weber&lt;/a&gt;&lt;/h3&gt;<br /> 
　
　&lt;p&gt;&lt;strong&gt;You've been invited to a meeting at Filament Group in Boston, MA&lt;/strong&gt;&lt;/p&gt;<br /> 
　　
&lt;p&gt;Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the Jquery team.&lt;/p&gt;<br /> 
　　
&lt;p class=&quot;ui-li-aside&quot;&gt;&lt;strong&gt;6:24&lt;/strong&gt;PM&lt;/p&gt;<br /> 
　
&lt;/li&gt;<br /> 
　
&lt;li&gt;<br /> 
　　
&lt;h3&gt;&lt;a href=&quot;index.html&quot;&gt;Jquery Team&lt;/a&gt;&lt;/h3&gt;<br /> 
　　
&lt;p&gt;&lt;strong&gt;Boston Conference Planning&lt;/strong&gt;&lt;/p&gt;<br /> 
　　
&lt;p&gt;In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.&lt;/p&gt;<br /> 
　　
&lt;p class=&quot;ui-li-aside&quot;&gt;&lt;strong&gt;9:18&lt;/strong&gt;AM&lt;/p&gt;<br /> 
　
&lt;/li&gt;<br />
&lt;/ul&gt;</p>
  </div>
        <p class="indent"><strong>效果图：</strong></p>
  <img src="../../images/list/List formatting2.png" tppabs="http://www.jqmapi.com/images/list/List%20formatting2.png"> 
  
  
  
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code"> 
    <p>&lt;ul data-role=&quot;listview&quot;&gt;<br />
 　&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Inbox&lt;/a&gt; &lt;span class=&quot;ui-li-count&quot;&gt;12&lt;/span&gt;&lt;/li&gt;<br /> 
 　
&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Outbox&lt;/a&gt; &lt;span class=&quot;ui-li-count&quot;&gt;0&lt;/span&gt;&lt;/li&gt;<br />
&lt;/ul&gt;</p>
  </div>
        <p class="indent"><strong>效果图：</strong></p>
  <img src="../../images/list/number buble.png" tppabs="http://www.jqmapi.com/images/list/number%20buble.png">
    	<hr />  
        
        
        		<div class="desc">
				<h1>9.列表项的缩略图与图标 Thumbnails &amp; icons</h1>
<div>要在列表项左侧添加缩略图，只需在列表项中添加一幅图片作为第一个子元素即可。Jquery Mobile会自动缩放图片为大小80px的正方形，而要使用标准?6*16的图标作为缩略图的话，为图片元素添加ui-li-icon class即可</div>

  </div>
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code"> 
    <p> &lt;ul data-role=&quot;listview&quot;&gt;<br />
 　&lt;li&gt;<br /> 
 　　
&lt;img src=&quot;images/album-bb.jpg&quot; /&gt;<br /> 
　　
&lt;h3&gt;&lt;a href=&quot;index.html&quot;&gt;Broken Bells&lt;/a&gt;&lt;/h3&gt;<br /> 
　　
&lt;p&gt;Broken Bells&lt;/p&gt;<br /> 
　
&lt;/li&gt;<br /> 
　
&lt;li&gt;<br /> 
　　
&lt;img src=&quot;images/album-hc.jpg&quot; /&gt;<br /> 
　　&lt;h3&gt;&lt;a href=&quot;index.html&quot;&gt;Warning&lt;/a&gt;&lt;/h3&gt;<br /> 
　　
&lt;p&gt;Hot Chip&lt;/p&gt;<br /> 
　
&lt;/li&gt;<br />
&lt;/ul&gt;</p>
  </div>
        <p class="indent"><strong>效果图：</strong></p>
  <img src="../../images/list/Thumbnails.png" tppabs="http://www.jqmapi.com/images/list/Thumbnails.png">
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code"> 
    <p>&lt;ul data-role=&quot;listview&quot;&gt;<br />
 　&lt;li&gt;&lt;img src=&quot;images/gf.png&quot; alt=&quot;France&quot; class=&quot;ui-li-icon&quot;&gt;&lt;a href=&quot;index.html&quot;&gt;France&lt;/a&gt; &lt;span class=&quot;ui-li-count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;<br /> 
 　
&lt;li&gt;&lt;img src=&quot;images/de.png&quot; alt=&quot;Germany&quot; class=&quot;ui-li-icon&quot;&gt;&lt;a href=&quot;index.html&quot;&gt;Germany&lt;/a&gt; &lt;span class=&quot;ui-li-count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;<br />
&lt;/ul&gt;</p>
  </div>
        <p class="indent"><strong>效果图：</strong></p>
  <img src="../../images/list/icons.png" tppabs="http://www.jqmapi.com/images/list/icons.png">
    	<hr /> 
        
        
                 		<div class="desc">
				<h1>10.内嵌的列表 Inset lists</h1>
                <div> 如果列表需要嵌入在有其他内容的页面中，内嵌列表会将列表设为边缘圆角，周围留有magin的块级元素。给列表（ul或ol）添加 data-inset=&quot;true&quot;属性 即可</div>
  </div>
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code"> 
    <p>&lt;ul data-role=&quot;listview&quot;   data-filter=&quot;true&quot;  &gt;<br />
　　&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;<br />
　　&lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;<br />
&lt;/ul&gt; </p>
  </div>
        <p class="indent"><strong>效果图：</strong></p>
  <img src="../../images/list/Inset list.png" tppabs="http://www.jqmapi.com/images/list/Inset%20list.png">
    	<hr />
        
        
                 		<div class="desc">
				<h1>更新列表 Updating lists</h1>
                <div>如果你给列表项添加了列表项，你需要调用refresh()方法将列表的样式更新并且将添加进的列表项生成嵌套列表。</div></div>
 				<p class="indent"><strong>html代码</strong></p>
  <div class="code"> 
    <p> $('#mylist').listview('refresh'); </p>
  </div>         		<div class="desc">
				<div>注意：<strong>refresh()</strong>方法只会对添加到list上的<strong>新节点</strong>起作用，这是从性能考虑的结果。所有已经渲染过的列表项都会被refresh忽略。所以这就意味着，如果你改变了一个已经存在的列表项的内容或属性，都不会有反应。如果你想改变一串的列表项，需要用新的标记替换，然后再用refresh方法刷新。</div></div>            
  </div>
<div class="subtab" style="display:none">
	  <div class="desc">
                <div> listview 拥有如下选项：</div>
	<h1 class="method"><div class="wg"> countTheme </div>
  		<div class="info">字符串</div>
	</h1>
</div>
				<div class="desc">
				<div><strong>默认: "c"</strong></div>
                </div>
				<div class="desc">
				<div>设置列表项的 计数泡泡 的主题样式。 接受从a-z的字母的主题样式。如果想给项目所有的<strong>listview</strong>统一的设置主题样式。需要给mobileinit event绑定设置。</div>
                </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
				<div class="code">$( document ).bind( &quot;mobileinit&quot;, function(){<br>
                  <strong>$.mobile.listview.prototype.options.countTheme = &quot;a&quot;;</strong><br>
});
                </div>
				<div class="desc">
				<div>也可以通过  <strong>data-count-theme="a"</strong>的属性来单独设置。</div>
                </div>
	<h1 class="method"><div class="wg">dividerTheme</div>
  		<div class="info">字符串</div>
</h1>
				<div class="desc">
				<div><strong>默认："b"</strong></div>
                </div>
				<div class="desc">
				<div>设置列表分割项的主题样式。接受从a-z的字母的主题样式。如果想给项目所有的<strong>列表分割项</strong>统一的设置主题样式。需要给mobileinit event绑定设置。</div>
                </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
				<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>    <strong>$.mobile.listview.prototype.options.dividerTheme = &quot;a&quot;;</strong><br>});</pre>
</div>
				<div class="desc">
				<div>也可以通过  <strong>data-divider-theme="a"</strong>的属性来单独设置。</div>
                </div>
	<h1 class="method"><div class="wg">filter</div>
  		<div class="info">布尔值</div>
</h1>
				<div class="desc">
				<div><strong>默认："false"</strong></div>
                </div>
				<div class="desc">
				<div>给列表添加搜索过滤框。如果想给项目所有的<strong>搜索过滤框</strong>统一的设置，需要给mobileinit event绑定设置。</div>
                </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
				<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>   <strong> $.mobile.listview.prototype.options.filter = true;</strong><br>});</pre>
</div>
				<div class="desc">
				<div>也可以通过  <strong>data-filter="true".</strong>的属性来单独设置。</div>
                </div>
	<h1 class="method"><div class="wg">filterCallback</div>
  		<div class="info"><em>function</em></div>
</h1>
	<div class="desc">
		<div>这个搜索过滤的回调函数用来设置当搜索过滤条中输入的文字发生改变时，列表中的哪些列表项隐藏。这个函数接受两个参数-1：列表项中的文字 2：搜索的字符串。返回<strong>true</strong>则隐藏这些列表项，返回<strong>false</strong>则不隐藏。如果想给项目所有的搜索过滤框统一的设置，需要给<strong>mobileinit event</strong>绑定设置。</div>
                </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
				<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>    $.mobile.listview.prototype.options.filterCallback = function( text, searchValue ) {<br>        <strong>// 只显示已搜索字符串开头的列表项</strong><br>        return text.toLowerCase().substring( 0, searchValue.length ) !== searchValue;<br>    };<br>});</pre>
</div>
	<h1 class="method"><div class="wg">filterPlaceholder</div>
  		<div class="info"><em>字符串</em></div>
</h1>
				<div class="desc">
				<div><strong>默认："Filter items..."</strong></div>
                </div>
	<div class="desc">
		<div><strong>(<span class="wg">Placeholder</span>是html5新加入的input的属性，为输入框的文字占位符，作用等同与默认的 value,在输入自己的文字时会消失，删掉自己输入的文字时会自动出现，也不会随着按钮默认的提交。)</strong>设置搜索输入框的<strong>Placeholder</strong>，如果想给项目所有的搜索过滤框统一的设置，需要给<strong>mobileinit event</strong>绑定设置。</div>
      </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
				<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>   <strong> $.mobile.listview.prototype.options.filterPlaceholder = &quot;Search...&quot;;</strong><br>});</pre>
</div>
				<div class="desc">
				<div>也可以通过  <strong> data-filter-placeholder="Search..."</strong>的属性来单独设置。</div>
                </div>
	<h1 class="method"><div class="wg">filterTheme</div>
  		<div class="info"><em>字符串</em></div>
</h1>
				<div class="desc">
				<div><strong>默认："c"</strong></div>
                </div>
	<div class="desc">
		<div>设置列表项的<strong>搜索输入框</strong>的主题样式。 接受从a-z的字母的主题样式。如果想给项目所有的<strong>搜索输入框</strong>统一的设置主题样式。需要给mobileinit event绑定设置。</div>
    </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
				<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>  <strong>  $.mobile.listview.prototype.options.filterTheme = &quot;a&quot;;</strong><br>});</pre>
</div>
				<div class="desc">
				<div>也可以通过  <strong> data-filter-theme="a".</strong>的属性来单独设置。</div>
                </div>
                
	<h1 class="method"><div class="wg">headerTheme</div>
  		<div class="info"><em>字符串</em></div>
</h1>
				<div class="desc">
				<div><strong>默认："b"</strong></div>
                </div>
	<div class="desc">
		<div>设置<strong>嵌套的列表项的子页面的header</strong>的主题样式。 接受从a-z的字母的主题样式。如果想给项目所有的<strong>搜索输入框</strong>统一的设置主题样式。需要给mobileinit event绑定设置。</div>
    </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
				<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>   <strong> $.mobile.listview.prototype.options.headerTheme = &quot;a&quot;;</strong><br>});</pre>
</div>
				<div class="desc">
				<div>也可以通过  <strong>data-header-theme="a"</strong>的属性来单独设置。</div>
                </div>
                
    
    
	<h1 class="method"><div class="wg">initSelector</div>
  		<div class="info"><em>css选择器字符串</em></div>
</h1>
				<div class="desc">
				<div><strong>默认："  :jqmData(role='listview')  "</strong></div>
                </div>
	<div class="desc">
		<div>被css选择器选择的容器会被自动初始化为listview.想改变自动初始化为list的dom,可以给mobileinit event绑定设置。</div>
    </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
	<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>   <strong> $.mobile.listview.prototype.options.initSelector = &quot;.mylistview&quot;;</strong><br>});</pre>
</div>


	<h1 class="method">
	  <div class="wg"> inset </div>
  		<div class="info">布尔值</div>
</h1>
				<div class="desc">
				<div><strong>默认："  false  "</strong></div>
                </div>
	<div class="desc">
		<div>将列表设置为内嵌的形式。 如果想给项目所有的列表统一的设置是否为内嵌，需要给mobileinit event绑定设置。</div>
    </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
	<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>    <strong>$.mobile.listview.prototype.options.inset = true;</strong><br>});</pre>
</div>
				<div class="desc">
				<div>也可以通过  <strong>data-inset="true"</strong>的属性来单独设置。</div>
                </div>
                
	<h1 class="method">
	  <div class="wg">splitIcon</div>
  		<div class="info">字符串</div>
</h1>
				<div class="desc">
				<div><strong>默认："arrow-r"</strong></div>
                </div>
	<div class="desc">
		<div>设置所有的<strong>拆分的按钮的</strong>图标。如果想给项目所有<strong>拆分的按钮的</strong>图标统一的设置主题样式。需要给mobileinit event绑定设置。</div>
    </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
	<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>    <strong>$.mobile.listview.prototype.options.splitIcon = &quot;star&quot;;</strong><br>});</pre>
</div>
				<div class="desc">
				<div>也可以通过  <strong>data-split-icon="star"</strong>的属性来单独设置。</div>
                </div>
       
	<h1 class="method">
	  <div class="wg">splitTheme</div>
  		<div class="info">字符串</div>
</h1>
				<div class="desc">
				<div><strong>默认："  b  "</strong></div>
                </div>
	<div class="desc">
		<div>设置所有的<strong>拆分的按钮的</strong>的主题样式。接受从a-z的字母的主题样式。如果想给项目所有<strong>拆分的按钮</strong>统一的设置主题样式。需要给mobileinit event绑定设置。</div>
    </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
	<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>    <strong>$.mobile.listview.prototype.options.splitTheme = &quot;a&quot;;</strong><br>});</pre>
</div>
				<div class="desc">
				<div>也可以通过  <strong>data-split-theme="a".</strong>的属性来单独设置。</div>
                </div>     
                
                
	<h1 class="method">
	  <div class="wg">theme</div>
  		<div class="info">字符串</div>
</h1>
				<div class="desc">
				<div><strong>默认：null,继承父容器</strong></div>
                </div>
	<div class="desc">
		<div>设置所有的<strong>listview</strong>的主题样式。接受从a-z的字母的主题样式。默认情况下，会继承父容器的主题样式的设置，如果想给项目所有<strong>listview</strong>统一的设置主题样式。需要给mobileinit event绑定设置。</div>
    </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
	<div class="code">
				  <pre>$( document ).bind( &quot;mobileinit&quot;, function(){<br>   <strong> $.mobile.listview.prototype.options.theme = &quot;a&quot;;</strong><br>});</pre>
</div>
				<div class="desc">
				<div>也可以通过  <strong>data-theme="a"</strong>的属性来单独设置。</div>
                </div> 
                </div>   
<div class="subtab"  style="display:none">
	  <div class="desc">
     <div>listview 拥有如下方法：</div>
	<h1 class="method"><div class="wg">childPages</div>
  		<div class="info">取得列表的子页面</div>
	</h1>
</div>
	<div class="desc">
		<div>此方法返回一个jquery对象，为嵌套页面的子页面</div>
    </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
				<div class="code">
				  <pre>$('.selector').listview('childPages');</pre>
</div>
	<h1 class="method"><div class="wg">refresh</div>
  		<div class="info">刷新listview</div>
</h1>
	<div class="desc">
		<div>如果用js手动修改了一个listview,必须调用refresh方法刷新listview的外观。</div>
    </div>
				<p class="indent"><strong>Java Script代码:</strong></p>
	  <div class="code">
				  <pre>$('.selector').listview('refresh');</pre>
</div>
</div>  
 <div class="subtab" style="display:none">
	  <div class="desc">
                <div>可以给OL元素或者ul元素直接绑定事件，可以使用jQuery Mobile的虚拟事件，或者绑定JavaScript的标准事件，例如change, focus, blur等。</div>
</div>
				<p class="indent"><strong>Java Script代码:</strong></p>
				<div class="code">
				  <pre>$( &quot;.selector&quot; ).bind( &quot;change&quot;, function(event, ui) {<br>  ...<br>});</pre>
</div>
	<div class="desc">
		<div>listview可以有如下的自定义事件</div>
    </div>
	<h1 class="method"><div class="wg">create</div>
  		<div class="info">当listview被创建时触发</div>
</h1>
				<p class="indent"><strong>Java Script代码:</strong></p>
	  <div class="code">
				  <pre>$( &quot;.selector&quot; ).listview({<br>   create: function(event, ui) { ... }<br>});</pre>
</div>
</div>          
</div>
</div>
</div>
</body>
</html>



